<template>
  <el-aside style="width: 200px;">
    <el-menu
        :default-active="$route.path"
        :unique-opened="true"
        active-text-color="rgb(65,160,255)"
        background-color="#2d3c4d"
        router
        @select="selectChange"
    >
      <el-submenu index="0">
        <template slot="title">
          <i class="el-icon-message"></i>员工管理
        </template>
        <el-menu-item index="/staff">员工列表</el-menu-item>
      </el-submenu>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>商品管理
        </template>
        <el-menu-item index="/goods">商品管理</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-setting"></i>统计管理
        </template>
        <el-menu-item index="/salescharts">销售统计</el-menu-item>
        <el-menu-item index="/worktimecharts">出勤统计</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name:'Navmenu',
  methods:{
    selectChange(){
      console.log('触发彩蛋点击')
      this.$store.state.isIndex = false;
    }
  }
};
</script>
<style lang="less">
// 左侧
.el-aside {
  background-color: #2d3a4d;
  color: #333;
  height: calc(100vh - 120px);  //动态计算左侧高度 100vh是浏览器高度
  .el-menu {
    border: none;
    .el-submenu__title {
      color: #fff;
    }
    .el-menu-item {
      color: #fff;
    }
  }
}
</style>